<script lang="ts" setup>
import { ref } from 'vue'
import { APP_TABBAR_HEIGHT, tabbarList } from '@/constant/index'
import { useSafeAreaHooks } from '@/hooks/useSafeArea'

const emits = defineEmits(['change'])

const { bottom } = useSafeAreaHooks()

const currentTab = ref('home')

onLoad((options) => {
  currentTab.value = options!.active || 'home'
})

const getStyle = computed(() => {
  return {
    height: `${APP_TABBAR_HEIGHT}px`,
    paddingBottom: `${bottom}px`,
  }
})
function onTabChange(tab: string) {
  emits('change', tab)
  currentTab.value = tab
}
</script>

<template>
  <!-- 底部导航栏 -->
  <view
    class="tab-bar"
    :style="{ ...getStyle }"
  >
    <view class="tab-bar-bg" />

    <view class="tab-items-container">
      <template
        v-for="tab in tabbarList"
        :key="tab.name"
      >
        <view
          v-if="tab.type === 'custom'"
          @click="onTabChange(tab.key)"
        >
          <uni-icons
            type="plus"
            size="50"
            :color="currentTab === tab.key ? tab.activeColor : tab.color"
          />
        </view>
        <view
          v-else
          class="tab-item"
          :class="{ active: currentTab === tab.key }"
          @click="onTabChange(tab.key)"
        >
          <uni-icons
            :type="currentTab === tab.key ? tab.activeIcon : tab.icon"
            size="30"
            :color="currentTab === tab.key ? tab.activeColor : tab.color"
          />
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="less" scoped>
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 120rpx;
  border-top: 1px solid #f0f0f0;
}

.tab-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}

.tab-items-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 10;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: opacity 0.2s ease;
  padding: 20rpx 0;
}

.tab-item.active {
  opacity: 1;
}

.tab-item:not(.active) {
  opacity: 0.6;
}

.tab-icon {
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.icon-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

/* 定义图标字体 */
@font-face {
  font-family: 'unicodeicon';
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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'),
    format('woff2');
  font-weight: normal;
  font-style: normal;
}
</style>
